<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
    <p>文字</p>
    <p>文字2</p>
<script>
/* 
1. 如何判断一个变量是否为数组
2. 手写一个jQuery 考虑插件和扩展性
3. class本质是什么
*/
/* class constructor 属性 方法 */
/* class Student {
    construtor(name,number){
        this.name = name;
        this.number = number;
    }
    sayHi(){
        console.log(`姓名${this.anme},学号${this.number}`);
    }
} */
//  通过new 创建实例
// const xialuo = new Student("夏洛",110);
// console.log(xialuo.name,xialuo.number);
// xialuo.sayHi();

/*继承 extends super */
class People{
    constructor(name){this.name = name;}
    eat(){
        console.log(`${this.name}正在吃饭`)
    }
}

class Student extends People {
    constructor(name,number){
        super(name);
        this.name = name;
        this.number = number;
    }
    sayHi(){
        console.log(`姓名${this.anme},学号${this.number}`);
    }
}

class Teacher extends People{
    constructor(name,major){
        super(name);
        this.major = major;
    }
    teach(){
        console.log(`姓名${this.name},讲${this.major}`);
    }
}
const xialuo = new Student("夏洛",110);
console.log(xialuo.name,xialuo.number);
xialuo.sayHi();
xialuo instanceof Student;//true
xialuo instanceof People;//true
xialuo instanceof Object;//true

[] instanceof Array;//true
[] instanceof Object; //true

// {} instanceof Object;; //true
//  class 实际上是函数
typeof People ;// function
typeof Student; // function 

//  隐式原型与显式原型
console.log(xialuo.__proto__);
console.log(Student.prototype);
console.log(xialuo.__proto__ === Student.prototype);


// 原型关系
/* 
每个class 都有显式原型prototype
每个实例都有隐式原型 __proto__
实例的__proto__ 指向对应class 的prototype 
*/

// 基于原型执行规则
/* 
获取属性name或执行方法sayHi时
先在自身属性和方中找
如果找不到自动去__proto__中找
 */

console.log(Student.prototype.__proto__);
console.log(People.prototype);
console.log(People.prototype === Student.prototype.__proto__);

xialuo.hasOwnProperty("name");
xialuo.hasOwnProperty("sayHi");
// xialuo.hasOwnProperty("hasOwnProperty");//false


// instanceof
// instanceof 前变量顺着隐式原型向上查找 如果如果能找到后面对象的显示原型就返回true

/* 1. 如何判断一个变量是否为数组
arr instanceof Array

2. 手写一个jQuery 考虑插件和扩展性
3. class本质是什么
原型与原型链图 属性方法执行规则
 */

 class jQuery  {
   
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
        return this;  
    }
    init(selector) {
    const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
        return this;
    }
     get(index) {
         return this[index];
     }
     each(fn){
         for(let i=0;i<this.length;i++){
             const elem  =this[i];
             fn(elem);
         }
     }
     on(type,fn){
        return this.each(elem=>{
            elem.addEventListener(type,fn,false);
        })  
     }
     addClass(className){
         this.each(elem=>elem.classList.add(className))
         return this;
     }
     css(name,value){
       if(value==undefined){
           return document.defaultView.getComputedStyle(this[0],null)[name];
            
       }else{
            this.each(elem => {
                elem.style[name]=value;
            })		 
            return this;
       }
       
    }
     
    show(){
        this.each(elem => {
            elem.css("display","block");
        })	
	 
		return this;
	}
	hide(){
        this.each(elem => {
            elem.css("display","none");
        })	
		return this;
	}
 }
 
// jQuery.prototype.init.prototype = jQuery.prototype;
// window.$ = jQuery;
 jQuery.prototype.dialog = function(info){
     alert(info);
 }
function aQuery (selector){
    return new jQuery(selector);
}
window.$ = aQuery;

 class myjQuery extends jQuery {

     constructor(selector){
         super(selector);
     }
     addClass(className){};
      
 }
</script>
</body>
</html>